let topDiv = document.querySelector(".top");
let point = document.querySelector(".point");
let sec = document.querySelector(".sec");
let minute = document.querySelector(".min");
let hour = document.querySelector(".hour");
let time = document.querySelector(".time");
let monthDiv = document.querySelector(".month");
let dayDiv = document.querySelector(".day");
let body = document.querySelector("body");
let degOld = -1;
let flag = true;
let degAcc = 0;
let nowInit = new Date();
let deg = nowInit.getSeconds() * 6 - 90;
// 定义月份的英文名称（取前三个字母）
const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

// 定义星期几的英文名称
const daysOfWeek = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
let interval = setInterval(() => {
  let now = new Date();
  let seconds = now.getSeconds();
  let min = now.getMinutes();
  min = String(min).padStart(2, "0");
  let h = now.getHours();
  let month = now.getMonth(); // 需要加 1 转换为 1-12
  let day = now.getDay();
  console.log(now.getDate());
  // 判断当前时间是上午还是下午
  const period = h >= 12 ? "PM" : "AM";
  let timeText = h + ":" + min + " " + period;
  let dateText = daysOfWeek[day] + ", " + months[month];
  time.textContent = timeText;
  monthDiv.textContent = dateText;
  dayDiv.textContent = now.getDate();
  h = h % 12;
  seconds += 1;
  deg += 6;
  let degMin = min * 6 - 90;
  let degHour = h * 30 - 90;
  let transformH = `rotate(${degHour}deg)`;
  let transformMin = `rotate(${degMin}deg)`;
  let transform = `rotate(${deg}deg)`;
  sec.style.transform = transform;
  minute.style.transform = transformMin;
  hour.style.transform = transformH;
  degOld = deg;
}, 1000);

function toDark() {
  topDiv.style.backgroundColor = "white";
  topDiv.style.color = "black";
  minute.style.backgroundColor = "white";
  hour.style.backgroundColor = "white";
  time.style.color = "white";
  dayDiv.style.backgroundColor = "white";
  dayDiv.style.color = "black";
  body.style.backgroundColor = "black";
  point.style.backgroundColor = "white";
}

function toLight() {
  topDiv.style.backgroundColor = "black";
  topDiv.style.color = "white";
  minute.style.backgroundColor = "black";
  hour.style.backgroundColor = "black";
  time.style.color = "black";
  dayDiv.style.backgroundColor = "black";
  dayDiv.style.color = "white";
  body.style.backgroundColor = "white";
  point.style.backgroundColor = "black";
}

topDiv.addEventListener("click", () => {
  if (flag) toDark();
  else toLight();
  flag = !flag;
});
